<template>
	<view class="content">
		<view class="form_area padding-top-30">
			<view class="input-item">
				<view>姓名</view>
				<input type="text" value="" v-model="name" />
			</view>
			<view class="input-item">
				<view>手机号</view>
				<input type="number" value="number" v-model="phone" />
			</view>
			<view class="confirm" @tap="goThird()">确认</view>
			<uni-popup :show="kuang" position="middle" mode="fixed" v-bind:msg="'请输入'+text" @hidePopup="togglePopup()" />
		</view>
	</view>
</template>

<script>
	import config from '@/common/config.js';
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		components: {
			uniPopup
		},
		data() {
			return {
				name: '',
				phone: '',
				text: '',
				kuang: false
			}
		},
		onLoad() {},

		methods: {
			goThird() {
				if (this.name == '') {
					this.kuang = true
					this.text = '姓名'
				} else if (this.phone == '') {
					this.kuang = true
					this.text = '手机号'
				} else {
					uni.request({
						url: config.ujqApi + '/api/user/baoMing',
						data: {
							userName: this.name,
							phone: this.phone,
							exhibitionId: "1"
						},
						method: "POST",
						header: {
							'content-type': 'application/x-www-form-urlencoded',
						},
						success: function(res) {
							uni.navigateTo({
								url: 'baoming-third'
							});
						}
					});
				}
			},
			togglePopup() {
				this.kuang = !this.kuang
			}
		}
	}
</script>

<style>
	page {
		background: rgba(245, 245, 245, 1);
		height: 100%
	}

	.content {
		width: 100%;
		height: 100%;
		background-image: url('http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/moban/1-2.png');
		background-size: 100% 100%;
	}

	.form_area {
		height: 60%;
		margin: 0 20% 0 18%;
		flex-wrap: wrap;
		flex-direction: column;
	}

	.padding-top-30 {
		padding-top: 40%;
	}

	.input-item {
		width: 100%;
		height: 33.3%;
	}

	.input-item input {
		height: 30px;
		background-color: #FFFFE0;
		border-radius: 5px;
		color-rendering: #FFF;
		font-size: 15px;
		padding-left: 10px;
	}

	.input-item view {
		height: 30px;
		line-height: 20px;
		font-size: 16px;
		color: #FFF;
	}

	.confirm {
		width: 80%;
		margin: 8% auto;
		height: 40px;
		text-align: center;
		line-height: 40px;
		border-radius: 5px;
		background-color: #EE5C42;
		font-size: 16px;
		color: #FFF;
	}
</style>
